﻿@page "/Image"
<h3>Image</h3>

<style>
    .image-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center; /* 水平居中 */
        position: relative;
    }

        .image-wrapper img {
            display: block;
            width: 400px; /* 或者你想要的任何宽度 */
            height: auto; /* 保持图像的原始宽高比 */
        }

    .outside-text {
        position: absolute;
        color: #333; /* 文本颜色 */
        padding: 5px 10px; /* 文本内边距 */
    }

    /* 在图像下方显示文本 */
    .bottom-text {
        bottom: -30px; /* 向上偏移以在图像外部显示 */
        left: 50%;
        transform: translateX(-50%); /* 水平居中 */
    }

    /* 在图像上方显示文本 */
    .right-text {
        right: -30px; /* 向上偏移以在图像外部显示 */
        left: 50%;
        transform: translateX(-50%); /* 水平居中 */
    }
</style>

<div class="image-wrapper">
    <img src="@baseImage" alt="Sample Image">
    <div class="outside-text bottom-text">这是下方的文本</div>
    <div class="outside-text right-text">这是右方的文本</div>
</div>
@code {
    #region

    public string baseImage = @"";

    #endregion
}
